{include file="public/header" title="购物车"/}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h3 class="mui-title">购物车</h3>
</header>
<div class="mui-content" id="card">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-red remove" data-id="1">删除</a>
            </div>
            <div class="mui-slider-handle">
                <div class="left">
                    <div class="checkbox">
                        <div class="mui-input-row mui-checkbox mui-left">
                            <input name="checkbox" value="1" type="checkbox">
                        </div>
                    </div>
                    <img src="/static/images/product/pos1.jpg" data-lazyload="/static/images/product/pos.jpg" alt="">
                </div>
                <div class="right">
                    <h3>POS是一种多功能终端</h3>
                    <div class="right-bottom">
                        <div class="right-bottom-left">
                            <span>￥</span>100<span>.00</span>
                        </div>
                        <div class="right-bottom-right">
                            <div class="mui-numbox" data-numbox-min='0'>
                                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                <input class="mui-input-numbox number" type="number" value="1" data-price="100.00"/>
                                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-red remove" data-id="1">删除</a>
            </div>
            <div class="mui-slider-handle">
                <div class="left">
                    <div class="checkbox">
                        <div class="mui-input-row mui-checkbox mui-left">
                            <input name="checkbox" value="1" type="checkbox">
                        </div>
                    </div>
                    <img src="/static/images/product/pos1.jpg" data-lazyload="/static/images/product/pos1.jpg" alt="">
                </div>
                <div class="right">
                    <h3>POS是一种多功能终端</h3>
                    <div class="right-bottom">
                        <div class="right-bottom-left">
                            <span>￥</span>100<span>.00</span>
                        </div>
                        <div class="right-bottom-right">
                            <div class="mui-numbox" data-numbox-min='0'>
                                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                                <input class="mui-input-numbox number" type="number" value="1" data-price="100.00"/>
                                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

    <div class="title">
        <span>可能你想要</span>
    </div>
    <ul class="lists layui-clear">
        <li>
            <a href="{:url('index/product_details')}">
                <div>
                    <img data-lazyload="/static/images/product/pos4.jpg" alt="">
                </div>
                <p class="title">POS是一种多功能终端</p>
                <p class="price"><span>￥</span>50.<span>00</span></p>
            </a>
        </li>
        <li>
            <a href="{:url('index/product_details')}">
                <div>
                    <img data-lazyload="/static/images/product/pos5.jpg" alt="">
                </div>
                <p class="title">连锁分店管理信息系统中的重要组成部分</p>
                <p class="price"><span>￥</span>100.<span>00</span></p>
            </a>
        </li>
        <li>
            <a href="{:url('index/product_details')}">
                <div>
                    <img data-lazyload="/static/images/product/pos6.jpg" alt="">
                </div>
                <p class="title">POS是一种多功能终端</p>
                <p class="price"><span>￥</span>50.<span>00</span></p>
            </a>
        </li>
        <li>
            <a href="{:url('index/product_details')}">
                <div>
                    <img data-lazyload="/static/images/product/pos1.jpg" alt="">
                </div>
                <p class="title">连锁分店管理信息系统中的重要组成部分</p>
                <p class="price"><span>￥</span>100.<span>00</span></p>
            </a>
        </li>
    </ul>
    <div style="height:50px;"></div>
</div>
<div id="card_nav">
    <div class="item_1">
        <div class="mui-input-row mui-checkbox mui-left">
            <input name="checkbox" id="all" value="1" type="checkbox">
        </div>
        全选
    </div>
    <div class="item_2">
        <p>
            总计：<span>￥<b id="total_price">150.00</b></span>
        </p>
    </div>
    <div class="item_3 buy">
        去结算<span>(<font id="total_number">2</font>件)</span>
    </div>
</div>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    (function ($) {
        /**
         * 图片懒加载
         */
        $(document).imageLazyload({
            placeholder: '/static/images/60x60.gif'
        });

        $('#card').on('tap', '.remove', function (event) {
            var elem = this, id = elem.getAttribute('data-id');
            var li = elem.parentNode.parentNode;
            mui.confirm('确认删除该商品？', '', ['确认', '取消'], function (e) {
                if (e.index === 0) {
                    li.parentNode.removeChild(li);
                } else {
                    $.swipeoutClose(li);
                }
            });
        });
        /**
         * 监听商品数量点击
         */
        mui('.number').each(function (index, obj) {
            obj.addEventListener('change', function () {
                if (obj.value < 1) {
                    obj.value = 1;
                    mui.toast('该商品一件起售', {duration: 'short', type: 'div'});
                    return false;
                }
                // 商品数量
                var $number = 1;
                // 商品单价
                var $price = obj.getAttribute('data-price');
                // 单个单品总价
                var $totalPrice = parseFloat(($number * $price).toFixed(2));
                var $total_number = parseInt(mui('#total_number')[0].innerText);
                mui('#total_number')[0].innerText = parseInt($total_number + $number);

                var $total_price = parseFloat(mui('#total_price')[0].innerText);
                mui('#total_price')[0].innerText =($total_price+$totalPrice).toFixed(2)
            });
        });
        /**
         * 监听复选
         */
        mui('.checkbox').each(function (index, boj) {
            $(boj).on('change', 'input', function () {
                if (this.checked === true) {
                    // 选中
                    // 复选框总数
                    var length = mui('.checkbox input').length;
                    // 选中数
                    var checkLength = mui('.checkbox input:checked').length;
                    // 如果选中数等于总数，全选选中
                    if (checkLength === length) {
                        document.getElementById('all').setAttribute('checked', true)
                    } else {
                        document.getElementById('all').removeAttribute('checked');
                    }
                } else {
                    // 取消选中
                    document.getElementById('all').removeAttribute('checked')
                }
            });
        });
        /**
         * 监听全选
         */
        mui('#card_nav').on('change', 'input', function () {
            mui('.checkbox input').each(function (index, obj) {
                if (true === this.checked) {
                    obj.setAttribute('checked', true);
                } else {
                    obj.removeAttribute('checked');
                }
            })
        });
    })(mui);
</script>
{include file="public/footer"/}